<template>
  <div className="home">
    <div :ref="'editor'+round" />
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
import { initConfig } from './config'
export default {
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: ''
    },
    // 自定义配置项
    customConfig: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      editor: null,
      round: undefined

    }
  },
  created: function() {
    //   支持同页面渲染多个组件
    this.round = Math.round(Math.random() * 100)
  },
  mounted() {
    const editor = new wangEditor(this.$refs['editor' + this.round])
    this.editor = editor
    // 创建编辑器
    editor.config = Object.assign({}, editor.config, initConfig({ vueInstance: this }), this.customConfig)
    editor.create()
    editor.txt.append(this.value)
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    clear() {
      this.editor.txt.clear()
    }
  }
}
</script>

